<template>
  <div class="row wallet-container checkout-page">
    <div class="col-md-6">
      <h4>
        我的余额 ￥<strong>{{ ruleForm.amount }}</strong
        >元
      </h4>

      <div class="order-payment">
        <ul id="accordion" class="list-unstyled" data-wow-duration="1500ms">
          <li>
            <h2 class="para-title active">
              <span
                class="collapsed"
                role="button"
                data-toggle="collapse"
                data-target="#collapseTwo"
                aria-expanded="false"
                aria-controls="collapseTwo"
              >
                直接充值
              </span>
            </h2>
            <div
              id="collapseTwo"
              class="collapse show"
              role="button"
              aria-labelledby="collapseTwo"
              data-parent="#accordion"
            >
              <p>直接将您的款项存入我们的银行账户。</p>
            </div>
          </li>
          <li>
            <h2 class="para-title">
              <span
                class="collapsed"
                role="button"
                data-toggle="collapse"
                data-target="#collapseOne"
                aria-expanded="false"
                aria-controls="collapseOne"
              >
                使用支付宝充值
                <img
                  src="assets/images/products/paypal-1-1.jpg"
                  tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/assets/images/products/paypal-1-1.jpg"
                  alt=""
                />
              </span>
            </h2>
            <div
              id="collapseOne"
              class="collapse"
              aria-labelledby="collapseOne"
              data-parent="#accordion"
            >
              <p>
                直接将您的款项存入我们的银行账户。请使用您的订单ID作为付款参考。在资金结清之前，您的订单不会发货。
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div class="button-box">
        <button class="thm-btn" @click="handleRecharge(50)">￥50元</button>
        <button class="thm-btn" @click="handleRecharge(100)">￥100元</button>
      </div>
      <div class="button-box">
        <button class="thm-btn" @click="handleRecharge(500)">￥500元</button>
        <button class="thm-btn" @click="handleRecharge(1000)">￥1000元</button>
      </div>

      <el-dialog
        title="充值"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="payer pwd-payer">
              <h4>
                充值金额：￥<strong>{{ wallet.amount }}</strong> 元
              </h4>
              <el-input
                type="password"
                v-model="wallet.password"
                placeholder="请输入支付密码："
              ></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleRechargeSubmit()"
            >确认支付</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="col-md-6">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation">
          <a
            href="#recharge"
            class="active"
            aria-controls="recharge"
            role="tab"
            data-toggle="tab"
            >充值记录</a
          >
        </li>
        <li role="presentation">
          <a
            href="#consumption"
            aria-controls="consumption"
            role="tab"
            data-toggle="tab"
            >消费记录</a
          >
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="recharge">
          <ul
            class="list-group"
            :key="account.id"
            v-for="account in ruleForm.walletAccounts"
          >
            <li class="list-group-item" v-if="account.type">
              <p class="list-group-summary">
                <span class="active">{{ account.amount }}</span
                ><span>{{ account.time }}</span>
              </p>
              <p>{{ account.description }}</p>
            </li>
          </ul>
        </div>

        <div role="tabpanel" class="tab-pane" id="consumption">
          <ul
            class="list-group"
            :key="account.id"
            v-for="account in ruleForm.walletAccounts"
          >
            <li class="list-group-item" v-if="!account.type">
              <p class="list-group-summary">
                <span class="active">{{ account.amount }}</span
                ><span>{{ account.time }}</span>
              </p>
              <p>{{ account.description }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
// eslint-disable-next-line
import { listWallet, initWallet, recharge, pay, getAmount } from "@/api/wallet";
export default {
  name: "Wallet",
  data() {
    return {
      orderid: null,
      // 钱包
      wallet: {
        id: null,
        uid: localStorage.getItem("UID"),
        password: null,
        amount: null,
      },
      ruleForm: {
        id: localStorage.getItem("UID"),
        email: localStorage.getItem("NAME"),
        avatar: null,
        nickname: null,
        password: null,
        address: null,
        // 余额
        amount: null,
        // 流水
        walletAccounts: [],
      },
      dialogVisible: false,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.ruleForm = this.$store.getters.GetUserInfo;
    },
    /**
     * 处理充值弹窗
     */
    handleRecharge(val) {
      this.dialogVisible = true;
      this.wallet.amount = val;
    },
    handleRechargeSubmit() {
      this.dialogVisible = false;
      recharge(this.wallet).then((res) => {
        console.log(res.data);
        this.$message(res.msg);
        this.ruleForm.walletAccounts = res.data.walletAccounts;
        this.ruleForm.amount = res.data.amount;
        // 数据同步
        this.$store.dispatch("SaveUserInfo");
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          console.log(_);
          done();
        })
        .catch((_) => {
          console.log(_);
        });
    },
  },
};
</script>

<style scoped>
.wallet-container {
  padding-top: 0px;
}
.wallet-container h4 {
  margin: 10px auto;
}
.wallet-container .col-md-3 {
  text-align: center;
}
.wallet-container li[role="presentation"] {
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
}
.wallet-container li[role="presentation"] a {
  color: #000;
}
.wallet-container li[role="presentation"] a.active {
  color: #60be74;
  font-weight: 800;
}
.button-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.button-box .thm-btn {
  text-align: center;
  width: 48%;
}
.pwd-payer {
  padding: 20px;
  text-align: center;
}
.pwd-payer button {
  margin: 10px auto;
}
.tab-content .list-group-item p {
  font-size: 12px;
}
.tab-content .list-group-item .list-group-summary {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}
.tab-content .list-group-item .list-group-summary .active {
  color: green;
  font-weight: 800;
}
#consumption .list-group-summary .active {
  color: red;
}
</style>